<template>
<div>
<!-- 使用默认按钮插件 -->
 <el-row>
  <el-button>默认按钮</el-button>
  <!-- type 按钮类型 string 类型 可选值primary / success / warning / danger / info / text -->
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
<br>

<!-- 使用简洁风格的按钮 plain属性-->
<el-row>
  <el-button plain >朴素按钮</el-button>
  <!-- plain 是否朴素按钮 boolean类型 默认值 flase  -->
  <el-button type="primary" plain >主要按钮</el-button>
  <el-button type="success" plain >成功按钮</el-button>
  <el-button type="info" plain >信息按钮</el-button>
  <el-button type="warning" plain >警告按钮</el-button>
  <el-button type="danger" plain >危险按钮</el-button>
</el-row>
<br>
<!-- 使用圆角按钮插件 round属性-->
<el-row>
  <!-- round 是否圆角按钮 boolean 类型 默认值false -->
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>
<br>
<!--使用图标按钮插件 引入图标 circle属性-->
<el-row>
  <!-- circle 是否圆形按钮 boolean类型 默认值false -->
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<br>
<!-- 使用禁用状态按钮插件（按钮不可用状态） -->
<!-- 可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。 -->
<el-row>
  <el-button disabled>默认按钮</el-button>
  <!-- disabled 是否禁用状态 boolean类型 默认值false -->
  <el-button type="primary" disabled>主要按钮</el-button>
  <el-button type="success" disabled>成功按钮</el-button>
  <el-button type="success" disabled="true">成功按钮</el-button>
  <el-button type="info" disabled>信息按钮</el-button>
  <el-button type="warning" disabled>警告按钮</el-button>
  <el-button type="danger" disabled>危险按钮</el-button>
</el-row>
<br>

<el-row>
  <el-button plain disabled>朴素按钮</el-button>
  <!-- autofocus 是否默认聚焦  boolean类型 默认值false -->
  <el-button type="primary" plain  autofocus>主要按钮</el-button>
  <el-button type="primary" plain  autofocus="true">主要按钮</el-button>
  <el-button type="success" plain disabled>成功按钮</el-button>
  <!-- native-type 原生type属性 string类型 可选值 button / submit / reset 默认值 button -->
  <el-button type="info" plain native-type="reset">信息按钮</el-button>
  <el-button type="warning" plain disabled>警告按钮</el-button>
  <el-button type="danger" plain disabled>危险按钮</el-button>
  <el-button type="success" native-type="submit" plain >提交按钮</el-button>
</el-row>
<br>
<!-- 文字按钮（没有边框和背景色的按钮） 属性为text-->
<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
<br>
<!-- 图标按钮（带图标的按钮可增强辨识度（有文字）或节省空间（无文字）） -->
<!-- 设置icon属性即可，只要使用i标签即可 可以使用自定义图标 -->
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<br>
<br>
<!-- 按钮组（以按钮组的方式出现，常用于多项类似操作） -->
<!-- 使用 <el-button-grounp> 标签来嵌套你的按钮  -->
  <el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
<br>
<br>
<!-- 加载按钮 （要设置为 loading 状态，只要设置loading属性为true即可）-->
<el-button type="primary" :loading="true">加载中</el-button>
<el-button type="primary" :loading="false">未加载</el-button>
<!-- loading 是否加载中的状态 boolean 类型默认值 flase -->
<br>
<!-- 不同尺寸的按钮（Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸） -->
<!-- 额外的尺寸：medium、small、mini，通过设置size属性来配置它们 -->
<el-row>
  <el-button>默认按钮</el-button>
  <!-- size 尺寸 string类型 可选值 medium / small / mini -->
  <el-button size="medium">中等按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>
</div>
</template>
<script lang='ts'>
import Vue from 'vue';

export default class Button extends Vue {
  private visible: boolean = true;
}
</script>
<style scoped>

</style>